﻿<html>  
  <head>  
        <meta charset="utf-8">  
        <title>11.2.1 基于GeoJSON绘制中国地图</title>  
  </head> 
  <style>
	.province {
		stroke: black;
		stroke-width: 1px;
	}
  
	.southchinasea {
		stroke: black;
		stroke-width: 1px;
		fill: red;
	}
  </style>
<body>
<script src="../../../d3/d3.min.js" charset="utf-8"></script> 
<script>

var width = 700,
	height = 700;
	
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

//定义地图的投影
var projection = d3.geo.mercator()
					.center([107, 31])
					.scale(600)
    				.translate([width/2, height/2]);
	
//定义地形路径生成器
var path = d3.geo.path()
			.projection(projection);	//设定投影
	
//颜色比例尺
var color = d3.scale.category20();
	
//请求china.geojson
d3.json("china.geojson", function(error, root) {

	if (error) 
		return console.error(error);
	console.log(root);

	var groups = svg.append("g");
		
	groups.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("class","province")
			.style("fill", function(d,i){
				return color(i);
			})
			.attr("d", path );	//使用路径生成器
		
});
	
//请求southchinasea.svg
d3.xml("southchinasea.svg", function(error, xmlDocument) {
	svg.html(function(d){
		return d3.select(this).html() + xmlDocument.getElementsByTagName("g")[0].outerHTML;
	});
	
	d3.select("#southchinasea")
		.attr("transform","translate(540,410)scale(0.5)")
		.attr("class","southchinasea");

});


</script>
		
    </body>  
</html>  